<template>
    <section id="works" class="works">
      <div class="works-container">
        <div class="section-header">
          <h2 class="section-title">我的作品</h2>
          <p class="section-subtitle">展示我最近完成的一些项目和创作</p>
        </div>
        
        <CategoryFilter 
          :categories="categories" 
          :selectedCategory="selectedCategory"
          @select="handleCategorySelect" 
        />
        
        <transition-group name="works-fade" tag="div" class="works-grid">
          <WorkCard 
            v-for="work in works" 
            :key="work.id" 
            :work="work"
            @click="openWorkDetails(work)" 
          />
        </transition-group>
        
        <div v-if="works.length === 0" class="no-works">
          <p>没有找到相关作品</p>
        </div>
      </div>
      
      <!-- 作品详情弹窗 -->
      <!-- <div class="work-details-modal" v-if="selectedWork" @click="closeWorkDetails">
        <div class="modal-content" @click.stop>
          <button class="modal-close" @click="closeWorkDetails">&times;</button>
          <div class="modal-image">
            <img :src="selectedWork.image" :alt="selectedWork.title">
          </div>
          <div class="modal-body">
            <h3>{{ selectedWork.title }}</h3>
            <div class="tags">
              <span v-for="(tag, index) in selectedWork.category" :key="index" class="tag">
                {{ tag }}
              </span>
            </div>
            <p class="description">{{ selectedWork.description }}</p>
            <div class="features" v-if="selectedWork.features && selectedWork.features.length">
              <h4>主要功能</h4>
              <ul>
                <li v-for="(feature, index) in selectedWork.features" :key="index">
                  {{ feature }}
                </li>
              </ul>
            </div>
            <div class="links">
              <a v-if="selectedWork.demoUrl" :href="selectedWork.demoUrl" target="_blank" class="btn btn-primary">
                查看演示
              </a>
              <a v-if="selectedWork.codeUrl" :href="selectedWork.codeUrl" target="_blank" class="btn btn-outline">
                查看代码
              </a>
            </div>
          </div>
        </div>
      </div> -->
    </section>
  </template>
  
  <script setup>
  import { ref, defineProps, defineEmits, watch } from 'vue';
import { useRouter } from 'vue-router';
  import CategoryFilter from './CategoryFilter.vue';
  import WorkCard from './WorkCard.vue';
  
  const props = defineProps({
    works: {
      type: Array,
      required: true
    },
    categories: {
      type: Array,
      required: true
    }
  });
  
  const emit = defineEmits(['filter']);
  const selectedCategory = ref('all');
  // const selectedWork = ref(null);
  
  const handleCategorySelect = (category) => {
    selectedCategory.value = category;
    emit('filter', category);
  };
  const router = useRouter();
  
  const openWorkDetails = (work) => {
    if(work.demoUrl) {
      router.push(work.demoUrl);
    }
  };
  // const openWorkDetails = (work) => {
  //   // selectedWork.value = work;
  //   // document.body.style.overflow = 'hidden';
  // };
  
  // const closeWorkDetails = () => {
  //   selectedWork.value = null;
  //   document.body.style.overflow = '';
  // };
  
  // // 监听ESC键关闭弹窗
  // const handleKeyDown = (e) => {
  //   if (e.key === 'Escape' && selectedWork.value) {
  //     closeWorkDetails();
  //   }
  // };
  
  // // 监听键盘事件
  // watch(selectedWork, (newVal) => {
  //   if (newVal) {
  //     window.addEventListener('keydown', handleKeyDown);
  //   } else {
  //     window.removeEventListener('keydown', handleKeyDown);
  //   }
  // });
  </script>
  
  <style lang="scss" scoped>
  @import '../styles/variables.scss';
  @import '../styles/animations.scss';
  @import '../styles/responsive.scss';
  
  .works {
    padding: 6rem 2rem;
    background-color: $bg-light;
    position: relative;
    
    @include mobile {
      padding: 4rem 1rem;
    }
    
    &-container {
      max-width: 1200px;
      margin: 0 auto;
    }
    
    &-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
      margin-top: 3rem;
      
      @include tablet {
        grid-template-columns: repeat(2, 1fr);
      }
      
      @include mobile {
        grid-template-columns: 1fr;
      }
    }
  }
  
  .section-header {
    text-align: center;
    margin-bottom: 3rem;
    
    .section-title {
      font-size: 2.5rem;
      margin-bottom: 1rem;
      position: relative;
      display: inline-block;
      color: $text-color;
      
      &:after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 3px;
        background: linear-gradient(to right, $primary-color, $accent-color);
      }
    }
    
    .section-subtitle {
      color: $text-secondary;
      font-size: 1.1rem;
      max-width: 600px;
      margin: 0 auto;
    }
  }
  
  .no-works {
    text-align: center;
    padding: 3rem;
    background-color: rgba($bg-color, 0.5);
    border-radius: 10px;
    margin-top: 2rem;
    color: $text-secondary;
  }
  
  // 作品详情弹窗样式
  // .work-details-modal {
  //   position: fixed;
  //   top: 0;
  //   left: 0;
  //   width: 100%;
  //   height: 100%;
  //   background-color: rgba(0, 0, 0, 0.7);
  //   display: flex;
  //   align-items: center;
  //   justify-content: center;
  //   z-index: 2000;
  //   animation: fadeIn 0.3s ease;
    
  //   .modal-content {
  //     background-color: white;
  //     border-radius: 10px;
  //     width: 90%;
  //     max-width: 1000px;
  //     max-height: 90vh;
  //     overflow-y: auto;
  //     display: flex;
  //     flex-direction: column;
  //     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  //     animation: scaleIn 0.3s ease;
      
  //     @include tablet {
  //       width: 95%;
  //     }
  //   }
    
  //   .modal-close {
  //     position: absolute;
  //     top: 15px;
  //     right: 15px;
  //     background: white;
  //     width: 35px;
  //     height: 35px;
  //     border-radius: 50%;
  //     display: flex;
  //     align-items: center;
  //     justify-content: center;
  //     border: none;
  //     font-size: 1.5rem;
  //     cursor: pointer;
  //     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  //     z-index: 10;
  //     transition: all 0.3s ease;
      
  //     &:hover {
  //       background-color: $primary-color;
  //       color: white;
  //       transform: rotate(90deg);
  //     }
  //   }
    
  //   .modal-image {
  //     width: 100%;
  //     height: 400px;
      
  //     @include mobile {
  //       height: 250px;
  //     }
      
  //     img {
  //       width: 100%;
  //       height: 100%;
  //       object-fit: cover;
  //       border-top-left-radius: 10px;
  //       border-top-right-radius: 10px;
  //     }
  //   }
  // }
  
  // .modal-body {
  //   padding: 2rem;
    
  //   h3 {
  //     font-size: 1.8rem;
  //     margin-bottom: 1rem;
  //     color: $text-color;
  //   }
    
  //   .tags {
  //     display: flex;
  //     flex-wrap: wrap;
  //     gap: 0.5rem;
  //     margin-bottom: 1.5rem;
      
  //     .tag {
  //       background-color: rgba($primary-color, 0.1);
  //       color: $primary-color;
  //       padding: 0.3rem 0.8rem;
  //       border-radius: 20px;
  //       font-size: 0.9rem;
  //     }
  //   }
    
  //   .description {
  //     line-height: 1.6;
  //     color: $text-secondary;
  //     margin-bottom: 1.5rem;
  //   }
    
  //   .features {
  //     margin-bottom: 1.5rem;
      
  //     h4 {
  //       margin-bottom: 0.8rem;
  //       font-size: 1.2rem;
  //     }
      
  //     ul {
  //       padding-left: 1.5rem;
        
  //       li {
  //         margin-bottom: 0.5rem;
  //         line-height: 1.4;
  //       }
  //     }
  //   }
    
  //   .links {
  //     display: flex;
  //     gap: 1rem;
      
  //     @include mobile {
  //       flex-direction: column;
  //     }
  //   }
  // }
// 由于仅一个 } 可能是多余的，推测可能是之前代码块多写了，这里直接移除该多余的 }

// 动画
.works-fade-enter-active,
.works-fade-leave-active {
  transition: all 0.5s ease;
}

.works-fade-enter-from,
.works-fade-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

.btn {
  display: inline-block;
  padding: 0.8rem 1.8rem;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  
  &-primary {
    background: linear-gradient(135deg, $primary-color, $accent-color);
    color: white;
    box-shadow: 0 5px 15px rgba($primary-color, 0.3);
    
    &:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba($primary-color, 0.4);
    }
  }
  
  &-outline {
    background: transparent;
    color: $primary-color;
    border: 2px solid $primary-color;
    
    &:hover {
      background-color: rgba($primary-color, 0.1);
      transform: translateY(-3px);
    }
  }
}
</style>